<template>
  <view class="wrap">
    <!-- 顶部导航 -->
    <fa-navbar title="信息" :border-bottom="false"></fa-navbar>

    <scroll-view scroll-y class="sc" @scrolltolower="scrolltolower">
      <view class="u-p-l-16 u-p-r-16">
        <view class="bg-white flex u-p-16 rounded u-m-b-16" v-for="item in list" @click="goPage('/pages/page/page?id=' + item.id)">
          <view>
            <!--            <u-icon name="heart" size="36rpx"></u-icon>-->
          </view>
          <view class="u-m-l-8">
            <view class="u-text-weight">{{ item.title }}</view>
            <view class="u-font-md u-line-2">
              {{ item.seotitle }}
            </view>
            <!--            <view class="u-m-t-8">
                          <image
                              src="/static/map.png"
                              v-for="item in 4"
                              :key="item"
                              class="img u-m-r-16 rounded"
                              mode="scaleToFill"
                          />
                        </view>-->
            <view class="u-font-xs u-tips-color u-m-t-8">{{ item.createtime }}</view>
          </view>
        </view>
        <!--        <view class="bg-white flex u-p-16 rounded u-m-b-16">
                  <view>
                    <image class="avatar" src="/static/map.png"/>
                  </view>
                  <view class="u-m-l-8">
                    <view class="u-text-weight">
                      <text>上善若水</text>
                      <wd-tag rounded type="primary">lv11</wd-tag>
                    </view>
                    <view class="u-font-md u-line-2">
                      欢迎来到华东共享会所联盟，关注微信公众号：华东共享会所联盟，添加
                      客服美美微信：hdgxhslm,获取更多相关资讯哦！
                    </view>
                    <view class="mt-1">
                      <image
                          src="/static/map.png"
                          v-for="item in 4"
                          :key="item"
                          class="img u-m-r-16 rounded"
                          mode="scaleToFill"
                      />
                    </view>
                    <view class="u-font-xs u-tips-color u-m-t-8">2024-11-01 12:00:00</view>
                  </view>
                </view>-->
        <!--        <view class="bg-white flex u-p-16 rounded u-m-b-16">
                  <view>
                    <image class="avatar" src="/static/map.png"/>
                  </view>
                  <view class="u-m-l-8">
                    <view class="u-text-weight">
                      <text>上善若水</text>
                      <wd-tag rounded type="primary">lv11</wd-tag>
                    </view>
                    <view class="u-font-md u-line-2">
                      欢迎来到华东共享会所联盟，关注微信公众号：华东共享会所联盟，添加
                      客服美美微信：hdgxhslm,获取更多相关资讯哦！
                    </view>
                    <view class="mt-1">
                      <image
                          src="/static/map.png"
                          v-for="item in 4"
                          :key="item"
                          class="img u-m-r-16 rounded"
                          mode="scaleToFill"
                      />
                    </view>
                    <view class="u-font-xs u-tips-color u-m-t-8">2024-11-01 12:00:00</view>
                  </view>
                </view>-->
      </view>
    </scroll-view>
    <map id="map" style="width: 100%; height: 150px" latitude="31.604213" longitude="120.286831" :markers="markers"></map>

    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      has_more: false,
      markers: [
        {
          id: 1,
          latitude: 31.604213,
          longitude: 120.286831,
          iconPath: '/static/location.png',
          width: 20,
          height: 20,
          callout: {
            content: '华东共享会所联盟', // 点击标记点显示的文本
            fontSize: 14, // 文本字体大小
            borderRadius: 5, // 边框圆角
            padding: 5, // 文本内边距
            display: 'ALWAYS' // 显示方式，ALWAYS 表示总是显示
          }
        }
      ]
    }
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList() {
      this.$api.newsList({page: this.page}).then(result => {

        let {code, data: res, msg} = result;
        if (code == 1) {
          console.log(res);
          this.list = [...this.list, ...res.data];
          this.has_more = res.current_page < res.last_page;
        }
      });
    },
    scrolltolower() {
      console.log('到底了');
      if (this.has_more) {
        this.page = this.page + 1;
        this.getList();
      }
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f1f1f1;
}

.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;

  .sc {
    flex: 1;
    min-height: 0;
  }
}

.avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}


.img {
  width: 140rpx;
  height: 140rpx;
}

.flex {
  display: flex;
}

</style>
